<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 设置受灾点选择组件
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass">
    <div class="head_bj">
      <div :class="[focusshow == true ? 'search_box' : 'search_box2']">
        <div v-if="theme=='dark'">
          <img src="@/assets/images/search_btn2.png" class="search_icon" v-if="focusshow" />
          <img src="@/assets/images/search2.png" class="search_icon" v-else />
        </div>
        <div v-else>
          <img src="@/assets/images/b_search_btn2.png" class="search_icon" v-if="focusshow" />
          <img src="@/assets/images/search2.png" class="search_icon" v-else />
        </div>
        <input type="text" placeholder="请输入搜索的地点" class="search" v-model="Locationsearch" @focus="getfocus(1)" @blur="showfocus(1)" />
      </div>
      <div :class="[coordinate == true ? 'search_coordinate' : 'search_coordinate2']">
        <input type="text" placeholder="请输入坐标" v-model="coordinatevalue" @focus="getfocus(2)" @blur="showfocus(2)" />
      </div>
      <div class="btn_box" @click="choice" v-if="theme=='dark'">
        <img src="@/assets/images/inform_btn2.png" v-if="Boxselection == 0" />
        <img src="@/assets/images/inform_btn3.png" v-else />
      </div>
      <div v-else class="btn_box" @click="choice">
        <img src="@/assets/images/b_inform_btn2.png" v-if="Boxselection == 0" />
        <img src="@/assets/images/b_inform_btn3.png" v-else />
      </div>
      <div style="margin-top:-3px;" @click="close">
        <img src="@/assets/images/notice_close.png" v-if="theme=='dark'" />
        <img src="@/assets/images/b_notice_close.png" v-else style="margin-top:3px;margin-left:10px;">
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    Boxselection: {
      type: Number
      // default: 1
    }
  },
  data () {
    return {
      focusshow: true,
      coordinate: true,
      // Boxselection: 0,
      Locationsearch: '', // 地点名称
      coordinatevalue: '' // 坐标搜索
    }
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  watch: {
    theme: {
      handler: function () {
        // console.log(newVal)
      }
    }
  },
  methods: {
    choice () {
      this.coordinatevalue = ''
      this.Locationsearch = ''
      this.$emit('drawshape', 3)
    },
    showfocus (type) {
      let that = this
      if (type === 1) {
        this.focusshow = true
        if (this.Locationsearch) {
          this.$emit('dd', this.Locationsearch)
        }
      } else if (type === 2) {
        this.coordinate = true
        if (this.coordinatevalue) {
          if (typeof that.coordinatevalue !== 'number') {
            that.$Message.error('请输入正确数据')
            that.coordinatevalue = ''
            return
          }
          this.$emit('Coordinatesearch', this.coordinatevalue)
        }
      }
    },
    getfocus (type) {
      if (type === 1) {
        this.focusshow = false
        this.coordinatevalue = ''
        this.Boxselection = 0
      } else if (type === 2) {
        this.coordinate = false
        this.Locationsearch = ''
        this.Boxselection = 0
      }
      this.$emit('Getfocus')
    },
    close () {
      this.coordinatevalue = ''
      this.Locationsearch = ''
      this.Boxselection = 0
      this.$emit('pointremove')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.head_bj {
  width: 509px;
  height: 66px;
  margin-left: auto;
  display: flex;
  box-sizing: border-box;
  padding-bottom: 16px;
  padding-top: 10px;
  @include themify($themes) {
    color: themed('font-color');
    background-image: themed('seth_bj');
    background-size: cover;
  }
}
.search_box {
  width: 210px;
  height: 30px;
  margin-left: 15px;
  position: relative;
  display:flex;
  @include themify($themes) {
    background: themed('search_box');
    color: themed('search_font');
  }
}
.search_box2 {
  width: 210px;
  height: 32px;
  margin-left: 15px;
  position: relative;
  @include themify($themes) {
    background: themed('search_box2');
    color: themed('search_font2');
  }
  display:flex;
}
.theme-light .search_box2{
  border:1px solid #027AFF
}
.theme-dark .search_box2{
  border:1px solid #72e6ff
}

.search_icon {
  position: absolute;
  top: 9px;
  left: 6px;
}
.search {
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
   @include themify($themes) {
    color: themed('search_font1');
  }
}
.search_box .search::placeholder {
  @include themify($themes) {
    color: themed('search_font');
  }
}
.search_box2 .search::placeholder {
   @include themify($themes) {
    color: themed('search_font2');
  }
}
.search_coordinate {
  width: 150px;
  height: 30px;
  @include themify($themes) {
    background: themed('search_box');
  }
  margin-left: 10px;
}
.search_coordinate2 {
  width: 150px;
  height: 30px;
  margin-left: 10px;
  @include themify($themes) {
    background: themed('search_box2');
    color: themed('search_font2');
  }
}
.theme-light .search_coordinate2{
  border:1px solid #027AFF
}
.theme-dark .search_coordinate2{
  border:1px solid #72e6ff
}
.search_coordinate input::placeholder {
  @include themify($themes) {
    color: themed('search_font');
  }
}
.search_coordinate2 input::placeholder {
  @include themify($themes) {
    color: themed('search_font2');
  }
}
.search_coordinate input,
.search_coordinate2 input {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  margin-left: 5px;
  @include themify($themes) {
    color: themed('search_font2');
  }
}
.btn_box {
  width: 60px;
  height: 30px;
  background-size: cover;
  margin-left: 10px;
}
</style>
